<template>
  <div id="app">
    <div id="title">关注{{ username1 }}的厨友</div>
    <ul>
      <li v-for="item in arr3" :data-userid="item.id">
        <img @click="fn" :src="item.touxiang" alt="" />
        <div>
          <div @click="fn2" class="username">{{ item.username }}</div>
          <div class="join">{{ item.jointime }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["username1",'arr3'],
  data() {
    return {
      userid:'',
    };
  },
  methods: {
      fn(e){
          this.$emit('updd1',e.target.parentNode.dataset.userid)
      },
      fn2(e){
        this.$emit('updd1',e.target.parentNode.parentNode.dataset.userid)
      }
  },
};
</script>


<style scoped='true'>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  height: 60px;
  margin-bottom: 30px;
  width: 250px;
  float: left;
  display: flex;
}
#app {
  padding: 40px;
  min-height: 300px;
}
#title {
  font-size: 16px;
  color: #dd3915;
  margin-bottom: 40px;
}
ul {
  overflow: hidden;
}
li img {
  width: 60px;
  height: 60px;
  margin-right: 20px;
  cursor: pointer;
}

li .username{
margin: 5px 0 4px 0;
  color: #dd3915;
  cursor: pointer;
}
li .username:hover {
  background-color: #dd3915;
  color: white;
}
</style>
